<template>
	<view class="addedit">
		<van-cell-group>
		  <van-field
		    @change="nameChange"
			:value="addInfo.name"
		    label="用户名"
		    left-icon="contact"
		    :border="border"
			placeholder="请输入姓名"
		  />

		    <van-field
		      @change="phoneChange"
			  :value="addInfo.phone"
		      label="手机号"
		      left-icon="phone"
			  maxlength="11"
		      :border="border"
		  	placeholder="请输入手机号码"
		    />
			
			<van-field
			    :value="addInfo.location"
			    center
			    clearable
			    label="位置"
			    placeholder="请选择位置"
			    :border="border"
			    use-button-slot
				left-icon="location"
			  >
			    <van-button slot="button" icon="location" size="small" @click="getLocaltion" type="primary"></van-button>
				</van-field>
				
				<van-field
				  @change="addChange"
				  :value="addInfo.address"
				  label="详细地址"
				  left-icon="hotel-o"
				  :border="border"
				placeholder="请输入详细地址"
				/>
				
		</van-cell-group>
		<button type="primary" @click="saveAddress">保存</button>
	</view>
</template>

<script>
	import { authPhone } from "@/post.js"
	export default {
		data() {
			return {
				border: true,
				map: {},
				addInfo: {
					name: "",
					phone: "",
					address: "",
					localtion: "",
					nativenative: "",
					latitude: "",
					longitude: "",
					province: "",
					city: "",
					county: "",
				},
				
			}
		},
		onShow() {
			// this.getLocaltion()
		},
		onLoad(e) {
			let type = e.type 
			if(type == 1) {
				this.addInfo = this.$store.state.editAddress
			} else {
				this.addInfo = {}
			}
		},
		computed:{
			token() {
				return this.$store.state.token
			}
		},
		methods: {
			nameChange(e) {
				this.addInfo.name = e.detail
			},
			phoneChange(e) {
				this.addInfo.phone = e.detail
			},
			addChange(e) {
				this.addInfo.address = e.detail
			},
			// 定位
			getLocaltion() {
				console.log(1);
				let self = this
				uni.getLocation({
					type:"wgs84",
					success(res) {
						console.log(res);
						self.map = res
						uni.openLocation({
							latitude:res.latitude,
							longitude: res.longitude,
							success(ret) {
								uni.chooseLocation({
									success( val ) {
										//console.log(val);
										self.addInfo.location = val.name
										self.addInfo.nativenative = `${val.address} ${val.name}`
										self.addInfo.latitude = val.latitude
										self.addInfo.longitude = val.longitude
										self.getCity(self.addInfo.latitude, self.addInfo.longitude)
									}
								})
							}
						})
					}
				})
			} ,
			// 获取城市
			getCity( latitude, longitude) {
				let self = this
				if(latitude && longitude) {
					uni.request({
						url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=${self.$apikey}`,
						data: {},
						success:( city ) => {
							// console.log(city);
							let data = city.data.result.ad_info
							// self.$store.commit("getCityInfo", city.data.result.ad_info)
							// console.log(this.$store.state.cityInfo);
							self.addInfo.province = data.province
							self.addInfo.city = data.city
							self.addInfo.county = data.district
						}
					})
				}
			},
			async saveAddress() {
				let self = this
				let isMatch = authPhone(this.addInfo.phone)
				// self.getCity(self.addInfo.latitude, self.addInfo.localtion)
				if(isMatch) {
					let data = {
						token: this.token,
						phone: this.addInfo.phone,
						name: this.addInfo.name,
						nativenative: this.addInfo.nativenative,
						address: this.addInfo.address,
						latitude: this.addInfo.latitude,
						longitude: this.addInfo.longitude,
						tacitly: "2",
						province: this.addInfo.province,
						city: this.addInfo.city,
						county: this.addInfo.county,
					}
					console.log(data);
					let res = await this.$Request("POST", "/Index/addressadd", data )
					console.log(res);
					if(res.data.code == 200) {
						uni.navigateBack({
							
						})
					}
				} else {
					uni.showToast({
						title:"号码格式错误",
						icon: "loading"
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addedit {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
	}
</style>
